<template>
  <div class="bg-white outerLayerDiv" style="width:100vw;position:relative;">
    <div style="width:200px;margin:0 auto" class="flex flex-col items-center">
    <div class="nav flex justify-center">
      <div style="width: 45vw" class="flex justify-between items-center tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="`tab 
          ${index == activeIndex && index == 0  ? 'active' : ''}
          ${index == activeIndex && index == 1  ? 'active1' : ''}
          ` "
          @click="changeTab(index)"
        >
          {{ tab.title }}
        </div>
      </div>
    </div>
    <p class="disctext">{{lineOne}}</p>
    <van-icon 
      @click="openDetail"
      name="arrow" 
      color="#ccc" size="1.5rem" class="mr-2 open-detail"/>
    <RingChart :ringList="ringList" :houseTotalPrice="houseTotalPrice" :monthPay="monthPay"></RingChart>
    <ul>
      <li class="houseMoney">         
        <span></span>
        <span>首月月供</span>
        <span>:</span>
        <span>{{monthPay}}</span>
        <span>元/月</span>
      </li>
      <!-- <li class="houseMoney" v-if="noEq">         
        <span>前</span>
        <span>{{lessMonth}}</span>
        <span>年月供</span>
        <span>:</span>
        <span>{{monthPay}}</span>
        <span>元/月</span>
      </li>
      <li class="houseMoney" v-if="noEq">         
        <span>后</span>
        <span>{{moreMonth}}</span>
        <span>年月供</span>
        <span>:</span>
        <span>{{afterPay}}</span>
        <span>元/月</span>
      </li> -->
       <li v-show="this.selectedItem==1" class="houseMoney">         
        <span></span>
        <span>每月递减</span>
        <span>:</span>
        <span>{{this.monthDecMoney}}</span>
        <span>元/月</span>
      </li>

      <!-- 本金 -->
      <!-- <li class="houseMoney" v-if="noSame">         
        <span></span>
        <span>第{{lastMonth}}月月供</span>
        <span>:</span>
        <span>{{lastMonthpay}}</span>
        <span>元/月</span>
      </li> -->
      <!-- <li class="houseMoney" v-if="noSame">         
        <span></span>
        <span>每月递减</span>
        <span>:</span>
        <span>{{lastLess}}</span>
        <span>元/月</span>
      </li> -->
    </ul>
    <p class="disctext" style="text-align:center"  id="result">以上结果仅供参考</p>
    <van-popup 
    v-model="showPicker" 
    :style="{height: '100%'}" 
    position="right"
    closeable
    >
       <month-pay-detail 
        v-if="showPicker"
        :totalPrice="totalPrice"
        :sloanMoney="+sloanMoney"
        :syears="syears"
        :sfinalRate="sfinalRate"
        :gloanMoney="+gloanMoney"
        :gyears="gyears"
        :gfinalRate="gfinalRate"
        :totalInterest="totalInterest"
       />
    </van-popup>
    </div>
  </div>

</template>
<script>
import RingChart from "./RingChart"
import LoanCaculate from "./LoanCaculate"
import monthPayDetail from "./monthPayDetail"

export default {
  props:["totalPrice", "sloanMoney", "gloanMoney", "syears", "gyears", "sfinalRate", "gfinalRate", "type"],
  components: {
    RingChart,
    monthPayDetail
  },
  data() {
    return {
      selectedItem:0,
      lineOne: "每月还款额固定，所还总利息较多，适合收入稳定者。",
      ringList:[],
      houseTotalPrice:'',
      // sloanMoney:0,
      // gloanMoney:0,
      payMoney:0,
      smonths:0,
      gmonths:0,
      monthPay:0,
      srate:0,
      grate:0,
      monthDecMoney:0,
      lessMonth:0,
      moreMonth:0,
      afterPay:0,
      noEq:true,
      noSame:false,
      lastMonth:0,
      lastMonthpay:0,
      lastLess:0,
      activeIndex: 0,
      tabs: [
          { title: "等额本息", url: "" },
          { title: "等额本金", url: "" },
      ],
      showPicker: false,
      totalInterest: 0
    }
  },
  mounted(){
    console.log("总价",this.totalPrice)
    console.log("贷款总额",this.sloanMoney,this.gloanMoney)
    console.log("贷款年限",this.syears,this.gyears)
    console.log("利率",this.sfinalRate,this.gfinalRate)
    console.log("类型",this.type)

    // this.totalPrice= this.$route.query.sloanMoney
    // this.sloanMoney= this.$route.query.sloanMoney*10000;
    // this.gloanMoney= this.$route.query.gloanMoney*10000;
    // this.totalPrice= this.sloanMoney + this.gloanMoney;//贷款总价
    // this.smonths = this.$route.query.smonths;
    // this.gmonths = this.$route.query.gmonths;
    // this.srate = this.$route.query.srate;
    // this.grate = this.$route.query.grate;

    // this.sloanMoney= +this.loanMoney*10000;  //商贷款额度
    // this.gloanMoney= 0;  //公
    this.tPrice = this.sloanMoney*10000 + this.gloanMoney*10000;//贷款总价
    this.smonths = this.syears*12;  //商
    this.gmonths = this.gyears*12;  //公
    this.srate = this.sfinalRate/100;  //商利率
    this.grate = this.gfinalRate/100;  //  公利率
    console.log(this.tPrice)
    console.log(this.smonths)
    console.log(this.gmonths)
    console.log(this.srate)
    console.log(this.grate)

    this.caculateAcpi(true); //  默认等额本息
  },
  methods: {
     changeTab(tab) {
      this.activeIndex = tab;
       if(tab==0){
        this.caculateAcpi(true);
        this.noSame = false;
        this.noEq = true;
      }else{
        this.caculateAcpi(false);
        this.noEq = false;
        this.noSame = true;
      }
    },
    // 打开月供详情
    openDetail(){
        this.showPicker = true;
    },
    caculateAcpi(isAcpi) {
      let totalMonthpay = 0;
      let nextmonthPay = 0;
      let smonthPay = 0;
      let totalPay=0;
      let gmonthPay = 0;
      //  本息
      if(isAcpi){
         smonthPay =  LoanCaculate.Acpi(this.srate,this.sloanMoney*10000,this.smonths);//商贷月付
         gmonthPay =  LoanCaculate.Acpi(this.grate,this.gloanMoney*10000,this.gmonths);//公积金月付

         if(smonthPay && gmonthPay){
           console.log("错误")
            totalMonthpay = smonthPay + gmonthPay;
         }else if(!smonthPay && gmonthPay){
            totalMonthpay = gmonthPay;
         }else if(smonthPay && !gmonthPay){
            totalMonthpay = smonthPay;
         }
         console.log("月供", smonthPay, gmonthPay)
         if(this.smonths && this.gmonths){
             totalPay = (smonthPay*this.smonths + gmonthPay*this.gmonths)/10000;
         }else if(!this.smonths && this.gmonths){
             totalPay =(gmonthPay*this.gmonths)/10000;
         }else if(this.smonths && !this.gmonths){
             totalPay =(smonthPay*this.smonths)/10000;
         }
         console.log(totalPay)
         if(this.smonths != this.gmonths){
             this.noEq = true;
             this.lessMonth = (Math.min(this.smonths,this.gmonths))/12;
             this.moreMonth = (Math.abs(this.smonths-this.gmonths))/12;
             if(this.smonths > this.gmonths){
                 this.afterPay = smonthPay.toFixed(0);
             }else{
                 this.afterPay = gmonthPay.toFixed(0);
             }
         };
         this.lineOne = "每月还款额固定，所还总利息较多，适合收入稳定者。"
         
      }
      else{
        if(this.smonths && this.gmonths){
              for(let month=0; month<this.smonths; month++){
                  smonthPay =  LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,month)//商业贷款月付
                  totalPay += smonthPay;//商贷共付
                }
                for(let month=0;month<this.gmonths;month++){
                  gmonthPay =  LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,month)//公积金贷款月付
                  totalPay += gmonthPay;//公积金共付
                }
                  totalMonthpay =  (LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,0) + LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,0))*10000;
                  nextmonthPay = ( LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,1) + LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,1))*10000;
         }else if(!this.smonths && this.gmonths){
                for(let month=0;month<this.gmonths;month++){
                          gmonthPay =  LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,month)//公积金贷款月付
                          totalPay += gmonthPay;//公积金共付
                        }
                  totalMonthpay =  (LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,0))*10000;
                  nextmonthPay =  (LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,1))*10000;
         }else if(this.smonths && !this.gmonths){
               for(let month=0;month<this.smonths;month++){
                  smonthPay =  LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,month)//商业贷款月付
                  totalPay += smonthPay;//商贷共付
         }
                  totalMonthpay =  (LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,0))*10000;
                  nextmonthPay =  (LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,1))*10000;
         }
        
        //  每月递减
        //  if(this.smonths != this.gmonths){
        //      this.noSame = true;
        //      this.lastMonth = Math.min(this.smonths,this.gmonths)+1;
        //       if(this.smonths > this.gmonths){
        //           this.lastMonthpay = parseInt(LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,this.lastMonth));
        //           this.lastLess = (LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,0) - LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,1)).toFixed(2);
        //      }else{
        //           this.lastMonthpay = parseInt(LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,this.lastMonth));
        //           this.lastLess = (LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,0) - LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,1)).toFixed(2);
                 
        //      }
        //  }
         //  商贷  公积金贷款
        //  totalMonthpay =  LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,0) + LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,0);
        // // 纯商贷
        // totalMonthpay =  LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,0);
        
        console.log("等额本金月供", totalMonthpay)
        //  let nextmonthPay =  LoanCaculate.AverageCapital(this.srate,this.sloanMoney,this.smonths,1) + LoanCaculate.AverageCapital(this.grate,this.gloanMoney,this.gmonths,1);
        console.log(nextmonthPay)
        this.monthDecMoney = (totalMonthpay - nextmonthPay).toFixed(2);
        this.lineOne = "每月还款额递减，所还总利息较低，前期还款额较大。"
       
      }
      // 最终月供
      this.monthPay = totalMonthpay.toFixed(0);
      // 总利息
      this.totalInterest = totalPay - this.sloanMoney - this.gloanMoney;
      this.houseTotalPrice = {name:"还款总价",value:(totalPay*10000).toFixed(2)}//还款总价, 
     //  本息列表
     this.ringList=[
        // { name: "贷款总价", value: (this.tPrice/10000).toFixed(2),unit: "万元", color: "#FFDA7C" },
        // { name: "支付利息", value: (this.totalInterest).toFixed(2),unit: "万元", color: "#FF70A0" }
        { name: "贷款总价", value: (this.tPrice).toFixed(2),unit: "元", color: "#FFDA7C" },
        { name: "支付利息", value: (this.totalInterest*10000).toFixed(2),unit: "元", color: "#FF70A0" }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.outerLayerDiv{
  margin-top: 30px;
  
  .tabs{
    border: 1px solid #4687f2;
    border-radius: 25px;
    margin-top: 10px;
  }
  .active{
    background-color: #4687f2;
    color: #fff;
    border-radius: 15px 0 0 15px;
  }
  .active1{
    background-color: #4687f2;
    color: #fff;
    border-radius: 0 15px 15px 0;
  }
  .tab{
    padding: 0px 10px;
  }
  .disctext{
    color: #b3b6be;
    font-size: 14px;
    line-height: 24px;
    margin: 8vh 0;
    padding: 0 14px;
  }
  ul .houseMoney{
    margin-top: 2vh;
  }
  .open-detail{
    position: absolute;
    right: 5vw;
    top: 50%;
    margin-top: -5vh;
  }
}
</style>
